<!-- prj_Weather_Forecast.html -->
<!doctype html>
<html="em">
    <head>
        <meta charset="UTF-8" name="referrer" content="never">  
        <title>天气预报</title>
            <link rel="stylesheet" type="text/css" href="weather-css.css"> 
    </head>
    <body>
        <div id="max">
            <!--logo+查询框+自动定位+实时时间显示-->
            <div id="mid1" class="app">
                <div id="logo">
                    <img class="logo1" src="./img/logo.jpg">
                </div> 
                <div id="register">
                    <a id="a1" href="login.html"><input type="button" value="登录"></a>&nbsp;&nbsp;&nbsp;
                    <a id="a2" href="register.html"><input type="button" value="注册"></a>
                </div>
                <div id="time">
                    <script language="JavaScript" type="text/Javascript" >
                    function show(){
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth()+1;
    month=month<10?"0"+month:month;
    var day = date.getDate();
    day=day<10?"0"+day:day;
    var week = date.getDay();
    switch(week){
    case 1:{
        week="星期一";
        break;
    }
    case 2:{
        week="星期二";
        break;
    }
    case 3:{
        week="星期三";
        break;
    }
    case 4:{
        week="星期四";
        break;
    }
    case 5:{
        week="星期五";
        break;
    }
    case 6:{
        week="星期六";
        break;
    }
    case 0:{
        week="星期日";
        break;
    }				
}
var hour = date.getHours();
hour= hour<10?"0"+ hour: hour;
var minute = date.getMinutes();
minute=minute<10?"0"+minute:minute;
var second = date.getSeconds();
second=second<10?"0"+second:second;
var result = year+"."+month+"."+day+" "+week+" "+hour+":"+minute+":"+second ;
document.getElementById("time").innerHTML = result;
}
show();
setInterval("show()",1000);
                    </script>
                </div>
                <div id="chaxun">
                    <input type="text" v-model="city" @keyup.enter="searchweather" class="input_txt" placeholder="请输入待查询地址" autocomplete="on">
                    <img class="input_sub" @click="changecity(city)" src="./img/搜索框图标.png">
                </div>
                <div id="remen">
                    &nbsp;&nbsp;<a id="city1"href="javascript:;" @click="changecity('北京')">&nbsp;&nbsp;北京</a>
                    <a id="city2" href="javascript:;" @click="changecity('深圳')">&nbsp;&nbsp;&nbsp;深圳</a>
                    <a id="city3" href="javascript:;" @click="changecity('上海')">&nbsp;&nbsp;&nbsp;上海</a>
                    <a id="city4" href="javascript:;" @click="changecity('福州')">&nbsp;&nbsp;&nbsp;福州</a>
                    <a id="city5" href="javascript:;" @click="changecity('大连')">&nbsp;&nbsp;&nbsp;大连</a>
                </div>
                <div>
                    <div id="location"><p  id="p1" @click="changecity('福州')">定位</p></div>
                    <div id="app1"><img id="locationimg" src="./img/定位小图标.png" onclick="getLocation()" onclick="getcity()"><p id="p1">{{ locationcity }}</p></div>
                    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
                    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7B6R3TfvCIq6CWoSSiMHV9cY4A6pTwxN"></script>
                    <script type="text/javascript" >
                    function getLocation() {
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
            console.log(this.getStatus());
            if(this.getStatus() == 0){
                var geoc = new BMap.Geocoder();
                geoc.getLocation(r.point,function(rs){
                    var address = rs.addressComponents;
                    var addComp = rs.addressComponents;
                    var currentCity,currentLocation;
                    currentCity =addComp.province.slice(0,-1) + "-" + addComp.city /*+ "-" +addComp.district*/;
                    console.log(currentCity);                   
                    if(rs.surroundingPois.length!==0){
                        currentLocation = rs.surroundingPois[0].title;
                    }else if(rs.surroundingPois.length==0){
                        if(rs.business!==''){
                            currentLocation = rs.business.split(',')[0];
                        }else if(rs.business==''){
                            currentLocation = addComp.city;
                        }
                    }
                    /*console.log(currentLocation);*/
                    var loca = currentCity + currentLocation;
                    $('#map').html(loca);
                });
            }else{
                console.log("定位失败");
            };
        },{enableHighAccuracy: true});
    }
                    </script>
                    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
                    <script type="text/javascript">
                        var app1 = new vue({
                            el:"#app1",
                            data:{
                                locationcity:[],
                            },
                            methods:{
                                getcity:function(){
                                    var that = this;
                                    axios.get("http://api.map.baidu.com/api?v=2.0&ak=7B6R3TfvCIq6CWoSSiMHV9cY4A6pTwxN")
                                    .then(function(response){
                                        that.city_position = response.data.data[0];
                                        console.log(rensponse.data.data[0]);
                                      
                                    },function (err){ })
                                }
                            },
                        })
                    </script>
                </div>
            </div>
            <!--天气大信息显示+就=近7天天气小信息显示-->
            
            <div id="mid2">
                <div id="min2">
                    
                    <ul class="weather_list">
                        <li v-for="item in weatherlist">
                            <div class="info_type"><span>{{ item.type }}</span>
                            </div>
                            <div>
                                <img class="photo" src="./img/多云.png">
                                </div>
                            <div class="info_temp">
                                <b><br>{{  item.low }}</b>
                                <b><br>{{  item.high }}</>
                            </div>
                            <div class="info_date"><span><br><br>{{  item.date }}</span></div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--根据天气进行推荐-->
            <div id="mid3">
                <div id="weather"><a id="ashiping" href="http://www.cctv1zhibo.com/tianqiyubao/">点击进入央视天气预报</a></div>
                <img class="yangshi" src="https://gitee.com/lin-guangquan/weather-forecast/raw/master/img/%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5.png">
        </div>
        <!--环境-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script type="text/javascript">
            var app = new Vue({
    el:"#max",
    data:{
        city:'',
        weatherlist:[]
    },
    methods:{
        searchweather:function(){
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
            .then(function(response){
                that.weatherlist = response.data.data.forecast
                console.log('response.data.data.forecast');
            })
            .catch(function(err){})
        },
        changecity:function(city){
            this.city = city;
            this.searchweather();
        }
    }
    
})
        </script>
    </body>
</html>